import React, { Component } from 'react'

export default class App extends Component {

    state = {
        msg: '今天是周一，周六还会远吗？'
    }

    render() {
        return (
            <div>
                <h1>App {this.state.msg} </h1>

                {/* 
                虽然可以显示内容，但是有一个系统错误
                    告诉我们使用 value 代表受控组件一定要有个 onChange 函数配合使用(否则为只读)
                    如果只是想设置默认值可以使用 defaultValue
                 */}
                {/* 该输入框无法输入任何内容，是一个只读的输入框 */}
                {/* <input style={{ width: '350px' }} value={this.state.msg} type="text" /> */}

                {/* 带有默认值的输入框 */}
                <input style={{ width: '350px' }} defaultValue={this.state.msg} type="text" />

                {/* onChange 是用来实现数据绑定的方法 */}
                <input style={{ width: '350px' }} onChange={(e) => {
                    this.setState({
                        msg: e.target.value
                    })
                }} value={this.state.msg} type="text" />


                {/* 
                    在 react 中表单分两种
                    1. 受控表单，带 value 和 onChange 的是受控
                    2. 非受控，不带的是非受控
                */}

            </div>
        )
    }
}
